<template>
	<view class="app">
		<image class="bgimg" src="../static/images/ban.png"></image>
		<view class="input-box">
			<view class="main-box" >
				<image class="main-bg" src="../static/images/cardimg.png"></image>
				<view class="cont-box">
					<view class="title">手机号注册</view>
					<view class="boxa">
						<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
							<u-form-item prop="mobile">
								<image class="icon" src="../static/images/phone.png"></image>
								<u-input v-model="form.mobile" placeholder="请输入手机号" maxlength="20" placeholder-style=" color:#999;font-size:0.8em " tupe="text" :border="border" />
							</u-form-item>
							<u-form-item prop="code">
								<image class="icon" src="../static/images/code.png"></image>
								<u-input v-model="form.code" placeholder="请输入验证码" maxlength="8" placeholder-style=" color:#999;font-size:0.8em "  type="text" :border="border">
								</u-input>
								<u-button class="custom-style" slot="right" size="mini" :border="border"
									@click="getCode">{{codeTips}}</u-button>
							</u-form-item>

							<u-form-item prop="pass">
								<image class="icon" src="../static/images/pass.png"></image>
								<u-input v-model="form.pass" placeholder="请输入密码(6-12位数字+密码)" maxlength="20" placeholder-style=" color:#999;font-size:0.8em "  type="password"
									:border="border" :password-icon="passwordIcon" />
							</u-form-item>
							<u-form-item prop="invite">
								<image class="icon" src="../static/images/invite.png"></image>
								<u-input v-model="form.invite" disabled placeholder="请输入邀请码" placeholder-style=" color:#999;font-size:0.8em "  type="text"
									:border="border" />
							</u-form-item>
						</u-form>
						<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					</view>
					<view class="radio-box">
					<u-checkbox-group  :size="size">
						<u-checkbox v-model="form.agree" shape="square"><text class="agree">我已阅读并同意 </text> <text class="agreeup">BT服务条款</text> </u-checkbox>
					</u-checkbox-group>
					</view>
					<view class="btn" @click="submit">
						注册
					</view>
					<view class="tips" @click="downloadApp">
						下载APP
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../utils/api.js'
	import md5 from '../utils/md5Utils.js'
	export default {
		data() {
			return {
				passwordIcon: false,
				border: false,
				value:'0',
				size:'30',
				codeTips: '',
				errorType: ['message'],

				form: {
					name: '',
					pass: '',
					code: '',
					invite:'',
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					pass: [{

						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					code: [{

							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					invite: [{
					
						required: false,
						message: '请输入邀请码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: '注册'
			});
		},
		onLoad() {
            console.log('onload...')
			var pages = getCurrentPages() //获取加载的页面
			var currentPage = pages[pages.length - 1] //获取当前页面的对象
			console.log('currentPage', currentPage);
			var url = currentPage.route //当前页面url
			var options = currentPage.options //如果要获取url中所带的参数可以查看options
			console.log('options', options);
			if(options&&options.invite){
				this.form.invite = options.invite
			}
		},
		computed: {
              
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {

			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					if(this.$u.test.mobile(this.form.mobile)){
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						this.sendVcode()
						// setTimeout(() => {
						// 	uni.hideLoading();
						// 	// 这里此提示会被this.start()方法中的提示覆盖
						// 	this.$u.toast('验证码已发送');
						// 	// 通知验证码组件内部开始倒计时
						// 	this.$refs.uCode.start();
						// }, 2000);
					}else{
						this.$u.toast('请输入正确的手机号');
					}
					
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			sendVcode(){
				// 
				let data = {
					loginName: this.form.mobile
				}
				api.post('/user/sendSms',data,(res)=>{
					console.log(res)
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				})
			},
			// 注册
			regist(){
				 let params = {
					 loginName: this.form.mobile,
					 passWord: md5.hexMD5(this.form.pass),
					 registerType: '1',
					 invitationCode: this.form.invite,
					 captcha: this.form.code
				 }
				 uni.showLoading({
				 	title: '正在处理...',
				 	mask: true
				 })
				 api.post('user/register',params,(res)=>{
					 console.log(res)
					 uni.hideLoading();
					 this.$u.toast('注册成功');
						
				 })
			},
			submit(){
				this.$refs.uForm.validate(valid => {
								if (valid) {
									// 提交数据
									if(!this.$u.test.mobile(this.form.mobile)){
										this.$u.toast('请输入正确的手机号');
										return
									}
									if(this.form.agree){
										this.regist();
									}else{
										this.$u.toast('请确认同意');
									}
									
								} else {
									console.log('验证失败');
								}
							});
			},
			downloadApp( ){
				  window.location.href ='https://app.jinse.com/'
			}
		},
	};
</script>

<style>
	page {
		background: #2304CE;
	}

	.bgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 55vh;
		z-index: 1;
	}

	.input-box {
		width: 90%;
		position: absolute;
		top: 36vh;
		z-index: 10;
		left: 5%;
		margin: 0 auto;
		display: block;
	}

	.input-box .main-box {
		position: relative;
	}

	.input-box .main-box .main-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 62vh;
	}

	.input-box .main-box .cont-box {
		box-sizing: border-box;
		padding: 0 5%;
	}

	.input-box .main-box .cont-box .title {
		color: #333;
		font-size: 1em;
		padding: 3em 0 0;
		font-weight: 600;
		letter-spacing: .1em;
	}

	.input-box .main-box .cont-box .cont-input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.boxa .icon {
		width: 1.8em;
		height: 1.8em;
		display: block;
		padding-right: .5em;
	}

	.custom-style {
		border: none;
		color: #3378FF;
	}

	.custom-style::after {
		border: none;
	}
	.input-box .main-box .cont-box .radio-box {padding: .5em 0;}
	.input-box .main-box .cont-box .radio-box  .agree{font-size: .9em;color: #666666;}
	.input-box .main-box .cont-box .radio-box  .agreeup{font-size: .9em;color: #3378FF;}
	.input-box .main-box .cont-box .btn{width: 100%;background: #3378FF;font-size: 1em; color: #fff;padding: 1em 0;border-radius: .4em;text-align: center;}
	.input-box .main-box .cont-box .tips{text-align: center;font-size: .9em;color: #3378FF;padding: .7em 0;text-decoration: underline;}
</style>
